<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-button type="primary" @click="addDialogVisible=true">添加分类</el-button>
      <!-- 树形表格区域 -->
      <tree-table :data="cateList" :columns="treeCol" :show-index="true" index-text="#" border :selection-type="false" :expand-type="false">
        <!-- 是否有效这一列的模板 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-circle-close red" v-if="scope.row.cat_deleted"></i>
          <i class="el-icon-circle-check green" v-else></i>
        </template>
        <!-- 排序这一列的模板 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作这一列的模板 -->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </tree-table>
    </el-card>
    <!-- 添加商品分类对话框 -->
    <el-dialog title="添加分类" width=50% @close="addDialogClosed"></el-dialog>
  </div>
</template>
<script>
import mix from './Category-mixins.js'
export default {
  mixins: [mix]
}
</script>
<style lang="less" scoped>
.red {
  color: red;
}
.green {
  color: lightseagreen;
}
</style>
